<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*日间模式*/
        .light {
            color: black;
            background-color: white;
        }

        .dark {
            color: white;
            background-color: black;
        }
    </style>
</head>
<body>
    <!-- 实现一个"夜间模式" -->
    <div class="dark">
        这是一段话. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eaque voluptate neque adipisci praesentium sint, hic, nulla obcaecati rem sapiente facere illum dolorum itaque? Recusandae quod quos tempore ratione illo.
        这是一段话. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eaque voluptate neque adipisci praesentium sint, hic, nulla obcaecati rem sapiente facere illum dolorum itaque? Recusandae quod quos tempore ratione illo.
        这是一段话. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eaque voluptate neque adipisci praesentium sint, hic, nulla obcaecati rem sapiente facere illum dolorum itaque? Recusandae quod quos tempore ratione illo.
        这是一段话. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eaque voluptate neque adipisci praesentium sint, hic, nulla obcaecati rem sapiente facere illum dolorum itaque? Recusandae quod quos tempore ratione illo.
        这是一段话. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eaque voluptate neque adipisci praesentium sint, hic, nulla obcaecati rem sapiente facere illum dolorum itaque? Recusandae quod quos tempore ratione illo.

    </div>

    <script>
        let div = document.querySelector('div');
        div.onclick = function() {
            if(div.className == 'light') {
                div.className = 'dark';
            }else {
                div.className = 'light'
            }
        }
    </script>
    
</body>
</html>